<template>
    <div class="fpi-menu">
        <template v-for="outerItem in menuList" :key="outerItem.code">
            <!-- 含有分组菜单 -->
            <ElPopover
                :show-after="50"
                :popper-style="{
                    width: 'auto',
                    paddingLeft: 0,
                    paddingRight: 0,
                    minWidth: '120px',
                }"
                placement="bottom"
                v-if="outerItem.group && outerItem.group.length"
                trigger="hover"
                ref="popoverRef"
            >
                <template #reference>
                    <div class="root-item" :class="{ active: rootActiveCode === outerItem.code }">
                        <span style="margin-right: 4px">{{ outerItem.label }}</span>
                        <ElIcon>
                            <ArrowDown />
                        </ElIcon>
                    </div>
                </template>
                <template #default>
                    <div class="header-menu-group-container">
                        <div
                            class="header-menu-group-item"
                            v-for="(middleItem, index) in outerItem.group"
                            :key="index"
                        >
                            <div class="header-menu-group-item-title" v-if="middleItem.code">
                                <span>{{ middleItem.label }}</span>
                            </div>
                            <div
                                class="header-menu-group-item-menu"
                                :class="{
                                    active: innerItem.code === activeCode,
                                }"
                                v-for="innerItem in middleItem.subs"
                                :key="innerItem.code"
                                @click="handleSelect(innerItem.code)"
                            >
                                {{ innerItem.label }}
                            </div>
                        </div>
                    </div>
                </template>
            </ElPopover>
            <!-- 无下级菜单 -->
            <div
                v-else
                class="root-item"
                :class="{ active: rootActiveCode === outerItem.code }"
                @click="handleSelect(outerItem.code)"
            >
                <span style="margin-right: 4px">{{ outerItem.label }}</span>
            </div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
    menuList: {
        type: Array as () => any[],
        default: () => [],
    },
    activeCode: {
        type: String,
        default: '',
    },
})

// 收集所有顶级code映射
const rootCodeMap = computed(() => {
    const obj: Record<string, string> = {}
    props.menuList.forEach(c => {
        if (c.group && c.group.length) {
            c.group.forEach((i: any) => {
                if (i.subs && i.subs.length) {
                    i.subs.forEach((k: any) => {
                        obj[k.code] = c.code
                    })
                }
                if (i.code) {
                    obj[i.code] = c.code
                }
            })
        }
        obj[c.code] = c.code
    })
    return obj
})

// 选择的顶级节点
const rootActiveCode = computed(() => rootCodeMap.value[props.activeCode])

// 对外暴露事件
const emits = defineEmits(['handle-selected-menu'])

// popover实例
const popoverRef = ref<any>(null)

// 选择
const handleSelect: any = (code: string[]) => {
    // 跳转到指定路由
    emits('handle-selected-menu', code)
    setTimeout(() => {
        if (popoverRef.value && popoverRef.value.length) {
            popoverRef.value.forEach((c: any) => {
                if (c) {
                    c.hide()
                }
            })
        }
    }, 100)
}
</script>

<style lang="scss" scoped>
.fpi-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    .root-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        padding: 0 12px;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.3s;

        &.active {
            font-weight: 500;
            color: #303330;
            background-color: #fff;
        }

        .el-icon {
            font-size: 12px;
            transition: all 0.3s;
        }

        &[aria-describedby] {
            .el-icon {
                transform: rotate(180deg);
            }
        }
    }
}

.header-menu-group-container {
    display: flex;
    justify-content: flex-start;
    width: auto;
}

.header-menu-group-item {
    min-width: 120px;
    margin-right: 8px;

    &:last-child {
        margin-right: 0;
    }
}

.header-menu-group-item-title {
    min-width: 120px;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 28px;
    color: #909399;
}

.header-menu-group-item-menu {
    min-width: 120px;
    height: 32px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;

    &.active {
        color: #0084ff;
    }

    &:hover {
        color: #0084ff;
        background-color: #ecf5ff;
    }
}
</style>
